<template>
  <div class="hotspot">
    <div class="hotspot_content flex flexc">
      <div class="header">
        <div class="title"><span></span>热点问题</div>
      </div>
      <a-row class="row_header flex align_items">
        <a-col :span="24" class="hotspot_left">
          <div class="left_title">
            <h1 class="fs16 bold">i国网打印工作站热点问题</h1>
          </div>
        </a-col>
        <!-- <a-col :span="18" class="hotspot_right" style="border-left: 1px solid #F0F1F4">
          <div class="search_box flex space_between">
            <div class="search">
              <a-input v-model:value="title" placeholder="请输入关键词搜素">
                <template #suffix>
                  <SearchOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
              <a-button @click="getList" type="primary">查询</a-button>
            </div>
            <div class="group_button">
              <a-button type="primary" @click="handerClick({key:'feedback',val:'back'})">反馈问题</a-button>
            </div>
          </div>
        </a-col> -->
      </a-row>
      <a-row class="flex_1 row2">
        <a-col :span="6" class="hotspot_left flex flexc space_between">
          <a-list class="hotspot_list" size="small" :loading="problemState.leftLoading" :split="false" :data-source="problemState.leftSourceList">
            <template #renderItem="{ item,index }">
              <a-list-item :class="['pointer',{'active':index === problemState.leftCurrent}]" @click="handerLeftClick(item,index)">
                <p>{{ item.title }}</p>
              </a-list-item>
            </template>
          </a-list>
        </a-col>
        <a-col :span="18" class="hotspot_right flex flexc space_between">
          <div class="text_content">
            <h3>{{ problemState.rightCurrentInfo.title }}</h3>
            <p>
              {{ problemState.rightCurrentInfo.answer }}
            </p>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import api from '@renderer/api/problem'
import { SearchOutlined } from '@ant-design/icons-vue'
// export default {
//   name: 'Hotspot',
//   data() {
//     return {
//       title: "",
//       sourceList: [],
//       sourceLength: 0,
//       current: 0,
//       isMore: false,
//       isAll:false,
//       loading: false,
//     }
//   },
//   mounted() {
//     this.getList();
//   },
//   methods: {
//     getList() {
//       this.loading = true
//       console.log(this.title)
//       api.getAllHotspotList({ keyWord: this.title }).then(res => {
//         console.log(333,res)
//         this.sourceList = res.data.slice(0, 5);
//         this.sourceLength = res.data.length;
//         this.current = 0;
//         this.loading = false;
//       })
//     },
//     handerClick(data) {
//       if (data.key === 'active') {
//         this.current = data.num;
//       } else if (data.key = 'feedback') {
//        this.$router.push(`/list/add`)
//       }
//     },
//     onLoadMore() {
//       this.loading = true;
//       api.getAllHotspotList({ keyWord: this.title }).then(res => {
//         this.sourceList = res.data.slice(0, 50);
//         this.sourceLength = res.data.length;
//         this.isMore = true;
//         this.loading = false;
//       })
//     },
//     onLoadAll(){
//       this.loading = true;
//       api.getAllHotspotList({ keyWord: this.title }).then(res => {
//         this.sourceList = res.data;
//         this.sourceLength = res.data.length;
//         this.isAll = true;
//         this.loading = false;
//       })
//     }
//   },
//   components: {
//     SearchOutlined,
//   }
// }
const problemState = reactive({
  form: {
    pageNum: 1,
    pageSize: 10,
    keyword: '',
    printerFid: '',
    system: '1'
  },
  current: 0,
  loading: false,
  pagination: {
      current: 1,
      pageSize: 10,
      total: 0,
      defaultPageSize: 10,
      showQuickJumper: false,
      showSizeChanger: false,
      showTotal: (total) => {
        return `共 ${total} 条数据`;
      },
      pageSizeOptions: ["10", "15", "20"],
      onChange: (current) => {
        problemState.pagination.current = current
        problemState.form.pageNum = current
        seach()
      },
      onShowSizeChange: (pageIndex, pageSize) => {
        problemState.pagination.pageSize = pageSize
        problemState.form.pageSize = pageSize
        seach()
      }
  },
  // tableHeight: document.body.clientHeight - 200,
  // tableColumns: column.tableColumns,
  leftCurrent: '',
  leftLoading: false,
  leftIsMore: false,
  leftIsAll: false,
  leftSourceList: [],
  rightCurrentInfo: {},
  tableData: []
})
const seach = () => {
  window.api.fetchData(api.getAllHotspotList(JSON.parse(JSON.stringify(problemState.form)))).then((res) => {
      if (res.code === 200) {
        problemState.leftSourceList = res.data
        // problemState.tableData = res.rows.filter((item) => !item.isHotspot)
        // problemState.pagination.total = res.total
      } else {
        message.error(res.data)
      }
    })
}
const handerLeftClick = (item,index) => {
  problemState.leftCurrent = index
  problemState.rightCurrentInfo = item

}
const onLoadMore = () => {

}
//     onLoadMore() {
//       this.loading = true;
//       api.getAllHotspotList({ keyWord: this.title }).then(res => {
//         this.sourceList = res.data.slice(0, 50);
//         this.sourceLength = res.data.length;
//         this.isMore = true;
//         this.loading = false;
//       })
//     },
// const getType = () => {
//   problemState.leftLoading = true
//   window.api.fetchData(api.getQsDictionary(JSON.parse(JSON.stringify({
//     pageNumber: 1,
//     pageSize: 999,
//     type: '0',
//     system2: '1'
//   })))).then((res) => {
//       if (res.code === 200) {
//         problemState.leftSourceList = res.rows
//       } else {
//         message.error(res.data)
//       }
//     }).finally(() => {
//       setTimeout(() => {
//         problemState.leftLoading = false
//       },1000)
//     })
// }

onMounted(() => {
  // getType()
  seach()
})
</script>
<style lang="scss" scope>
@use './css/hotspot.scss' as vars;
</style>
